<template>
    <div class="replay-progress" v-if="show">
        <van-icon color="#EC6938" size=".7rem" :name="isPause?'pause-circle':'play-circle'" @click="play" />
        <div class="progress">
            <van-progress :percentage="percentage" color="#EC6938" stroke-width=".1rem" />
        </div>
        <van-icon color="#EC6938" size=".7rem" name="stop-circle" @click="stop" />
    </div>
</template>

<script>
    import { mapGetters } from 'vuex';
    export default {
        data() {
            return {
                isPause: false,
                percentage: 0
            }
        },
        props: {
            show: {
                type: Boolean,
                required: true
            }
        },
        computed: {
            ...mapGetters(['tqlCanvas'])
        },
        watch: {
            'tqlCanvas.replayPercentage'(newVal) {
                this.percentage = newVal
                if (newVal === 100) {
                    this.replayFulfill()
                    this.$toast('回放完成')
                }
            }
        },
        methods: {
            play() {
                this.$dialog.confirm({
                    title: '提示',
                    message: '确定开始回放吗？',
                }).then(() => {
                    this.tqlCanvas.replay().then((data) => {
                        console.log(data);
                        this.$toast(data.msg)
                        if (data.status === 1) {
                            this.isPause = !this.isPause
                        }
                    }).catch((e) => {
                        console.log(e);
                    })
                }).catch((e) => {
                    console.log(e);
                });
            },
            stop() {
                this.$dialog.confirm({
                    title: '提示',
                    message: '确定取消回放吗？',
                }).then(() => {
                    this.tqlCanvas.cancelReplay().then((data) => {
                        console.log(data);
                        this.replayFulfill()
                        this.$toast('取消回放')
                    }).catch((e) => {
                        console.log(e);
                    })
                }).catch((e) => {
                    console.log(e);
                });
            },
            //回放完成
            replayFulfill() {
                this.$emit('update:show', false)
                this.percentage = 0
                this.isPause = false
            }
        }
    }
</script>

<style lang="less" scoped>
    .replay-progress {
        display: flex;
        align-items: center;
        width: 7.3rem;
        height: 1rem;
        position: fixed;
        bottom: 1.2rem;
        left: 0.1rem;
        right: 0;
        padding: .15rem;
        border-radius: 1rem;
        background-color: #ffffff;
        box-shadow: 0 0 5px 1px #aaaaaa;

        .progress {
            flex: 1;
            padding: 0 .2rem;
        }
    }
</style>